<template>
  <el-row>
    <el-col :span="24">
      <!-- <basic-container> -->
      <avue-crud ref="crud" v-model="form" :option="option" :table-loading="loading" :data="data"
        :permission="permissionList" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
        @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
        @refresh-change="refreshChange" @on-load="onLoad">
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row)">详情
          </el-button>
          <el-button type="text" style="color:red;" size="small" @click="openConfirm(scope.row, 2)">驳回
          </el-button>
          <el-button type="text" style="color: #67c23a;" size="small" @click="openConfirm(scope.row, 1)">通过
          </el-button>
        </template>
      </avue-crud>
      <el-dialog title="店铺详情" center :visible.sync="dialogVisible" top="72px" width="500px">
        <div class="shop-detail">
          <div class="fs-18 mb-15">项目详情</div>
          <div>
            <section class="flex align-center mb-15">
              <span class="w-100">店铺名称</span>
              <span>{{ detailMsg.storeName }}</span>
            </section>
            <section class="flex align-center mb-15">
              <span class="w-100">所属区域</span>
              <span>{{ detailMsg.regionName }}</span>
            </section>
            <section class="flex align-center mb-15">
              <span class="w-100">详细地址</span>
              <span>{{ detailMsg.storeAddress }}</span>
            </section>
            <section class="flex align-center mb-15">
              <span class="w-100">店铺负责人</span>
              <span>{{ detailMsg.linkMan }}</span>
            </section>
            <section class="flex align-center mb-15">
              <span class="w-100">手机号码</span>
              <span>{{ detailMsg.phone }}</span>
            </section>
            <section class="flex align-center mb-10">
              <span class="w-100">营业时间</span>
              <span>{{ detailMsg.startTime }} - {{ detailMsg.endTime }}</span>
            </section>
            <section class="map mb-15" />
            <section class="mb-15">
              <div class="mb-10">店铺logo(点击图片预览大图)</div>
              <!-- <img class="logo" :src="detailMsg.storeLogo" :preview-src-list="srcList" alt=""> -->
              <el-image class="logo" :src="detailMsg.storeLogo" :preview-src-list="[detailMsg.storeLogo]" />
            </section>
            <section class="mb-15">
              <div class="mb-10">大门照片(点击图片预览大图)</div>
              <!-- <img class="detail-pic" :src="detailMsg.storeGateImage" alt=""> -->
              <el-image class="detail-pic" :src="detailMsg.storeGateImage"
                :preview-src-list="[detailMsg.storeGateImage]" />
            </section>
            <section>
              <div class="mb-10">店铺酒柜图片(点击图片预览大图)</div>
              <!-- <img class="detail-pic" :src="detailMsg.storeCabinetImage" alt=""> -->
              <el-image class="detail-pic" :src="detailMsg.storeCabinetImage"
                :preview-src-list="[detailMsg.storeCabinetImage]" />
            </section>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dangerConfirm = true">驳回</el-button>
          <el-button type="primary" :loading="btnLoading" @click="successConfirm = true">审核通过</el-button>
        </span>
      </el-dialog>

      <!-- 驳回 -->
      <el-dialog title="审核确认" :visible.sync="dangerConfirm" top="72px" width="500px">
        <el-form ref="form" :rules="rules" :model="ruleForm" label-width="120px">
          <el-form-item label="驳回原因" prop="applyMsg">
            <el-input v-model="ruleForm.applyMsg" placeholder="请填写驳回原因" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dangerConfirm = false">取消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submit(2)">确定</el-button>
        </span>
      </el-dialog>

      <!-- 审批通过 -->
      <el-dialog title="审核确认" :visible.sync="successConfirm" top="72px" width="500px">
        <div style="color: #606266;">请确认是否审核通过</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="successConfirm = false">取消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submit(1)">确定</el-button>
        </span>
      </el-dialog>
      <!-- </basic-container> -->
    </el-col>
  </el-row>
</template>

<script>
import { storeList, applyStore } from '@/api/mallManage'

export default {
  data() {
    return {
      form: {},
      dialogVisible: false,
      dangerConfirm: false,
      successConfirm: false,
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      props: {
        label: 'menuName',
        value: 'id'
      },
      menuGrantList: [],
      menuTreeObj: [],
      selectionList: [],
      expandedKeys: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        rowKey: 'roleId',
        emptyBtnText: '重置',
        columnBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        cellBtn: false,
        tree: true,
        border: false,
        index: false,
        selection: false,
        viewBtn: false,
        dialogWidth: 500,
        dialogClickModal: false,
        menuWidth: 160,
        align: 'center',
        column: [
          {
            label: '店铺名称',
            prop: 'storeName',
            search: true,
            span: 24,
            labelWidth: 120,
            searchLabelWidth: 120
          },
          {
            label: '所属区域',
            prop: 'regionName',
            search: false,
            span: 24,
            labelWidth: 120
          },
          {
            label: '详细地址',
            prop: 'storeAddress',
            search: false,
            span: 24,
            labelWidth: 100,
            width: 100
          },
          {
            label: '项目负责人',
            prop: 'linkMan',
            search: true,
            span: 24,
            labelWidth: 100,
            searchLabelWidth: 120,
            width: 100
          },
          {
            label: '负责人手机号',
            prop: 'phone',
            search: true,
            span: 24,
            labelWidth: 100,
            searchLabelWidth: 120,
            width: 100
          },
          {
            label: '注册时间',
            prop: 'createTime',
            search: false,
            span: 24,
            labelWidth: 100,
            width: 140
          }
        ]
      },
      data: [],
      selectRoleId: '',
      detailMsg: {},
      isShowGoodsBtn: false, // 确认发货按钮
      rules: {
        applyMsg: [
          { required: true, message: '请填写驳回原因', trigger: 'blur' }
        ]
      },
      ruleForm: {
        applyMsg: ''
      },
      btnLoading: false
    }
  },
  computed: {
    permissionList() {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      }
    },
    ids() {
      const ids = []
      this.selectionList.forEach((ele) => {
        ids.push(ele.roleId)
      })
      return ids
    }
  },
  watch: {},
  mounted() {
    // this.initData();
  },
  methods: {
    doPriveImg() {
      this.$refs.myGateImg.showViewer = true
    },

    closeDialog() {
      this.showConfirm = false
    },
    async handleDetail(row) {
      this.detailMsg = { ...row }
      this.dialogVisible = true
    },
    openConfirm(row, status) {
      this.detailMsg = { ...row }
      if (status === 1) {
        this.successConfirm = true
      } else {
        this.dangerConfirm = true
      }
    },
    checkValid() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          resolve(valid)
        })
      })
    },
    async submit(status) {
      if (status === 2) {
        const valid = await this.checkValid()
        if (!valid) return
      }
      try {
        this.btnLoading = true
        let params = {}
        if (status === 1) {
          params = {
            storeId: this.detailMsg.storeId,
            applyStatus: status
          }
        } else if (status === 2) {
          params = {
            storeId: this.detailMsg.storeId,
            applyStatus: status,
            applyMsg: this.ruleForm.applyMsg
          }
        }
        const result = await applyStore(params)
        if (result.code === 200) {
          this.$message.success(status === 1 ? '审核通过成功' : '申请驳回成功')
          setTimeout(() => {
            this.btnLoading = false
            this.dialogVisible = false
            this.dangerConfirm = false
            this.successConfirm = false
            this.searchReset()
          })
        } else {
          this.btnLoading = false
        }
      } catch (error) {
        this.btnLoading = false
      }
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange(list) {
      this.selectionList = list
    },
    selectionClear() {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },

    async handleRole(row) {
      await this.handleDetail(row)
      this.isShowGoodsBtn = true
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true
      storeList({
        current: page.currentPage,
        size: page.pageSize,
        ...Object.assign(params, this.query)
      }).then((res) => {
        const data = res.data
        this.data = data.records
        this.page.total = data.total
        this.loading = false
        this.selectionClear()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menuGrantList {
  max-height: 380px;
  overflow: auto;
}

.detail-box {
  color: #3e3e3e;
}

.desc {
  color: #666;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.item-price {
  margin-left: auto;
}

.price {
  color: #CF2222;
}

.old-price {
  text-decoration: line-through;
  color: #A1A1A1;
  font-size: 10px;
}

.map {
  width: 100%;
  height: 136px;
}

.logo {
  width: 88px;
  height: 88px;
  border-radius: 10px;
}

.detail-pic {
  width: 334px;
  height: 135px;
  border-radius: 10px;
}

.shop-detail {
  color: #3D3D3D;
}
</style>
